<template>
  <div class="home-container">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#ffffff"
          class="el-menu-vertical"
          default-active="0"
          text-color="#1a202c"
          router
        >
          <div class="box">
            <img src="../../assets/1.jpg" alt="logo" style="width: 100%; height: 100%;" />
          </div>
          <el-menu-item index="/home">
            <span>系统首页</span>
          </el-menu-item>
          <el-menu-item index="/home/page1">
            <span>大数据统计界面</span>
          </el-menu-item>
          <el-menu-item index="/home/page2">
            <span>油画信息管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page3">
            <span>油画作家联系</span>
          </el-menu-item>
          <el-menu-item index="/home/page4">
            <span>油画订单管理</span>
          </el-menu-item>
          <el-menu-item index="/home/page5">
            <span>油画品控投诉</span>
          </el-menu-item>
          <el-menu-item index="/home/page6">
            <span>个人信息界面</span>
          </el-menu-item>
          <el-menu-item @click="handleLogout">
            <span>确认退出系统</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-container>
        <!-- 添加顶部栏 -->
        <el-header height="60px">
          <div class="header-content">
            <div class="header-title">油画信息管理系统</div>
            <el-button type="danger" @click="handleLogout" size="small">
              退出系统
            </el-button>
          </div>
        </el-header>
        <el-main>
          <div class="bigbox">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'

const router = useRouter()

const handleLogout = () => {
  ElMessageBox.confirm('确认要退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // 清除登录状态
    localStorage.removeItem('isLoggedIn')
    // 跳转到登录页
    router.push('/')
  }).catch(() => {})
}
</script>

<style scoped>
/* 主容器 */
.home-container {
  height: 100vh;
  background: linear-gradient(145deg, #F8F9FA 0%, #E9ECEF 100%); /* 浅灰调画布基底[5](@ref) */
}

/* 侧边菜单 */
.el-menu-vertical {
  background: rgba(255, 255, 255, 0.98) !important;
  border-right: 1px solid rgba(206, 212, 218, 0.3); /* 浅灰分割线 */
  height: 100vh;
}

.el-aside {
  background: linear-gradient(160deg, #F8F9FA 30%, #E9ECEF 100%); /* 浅灰渐变 */
  box-shadow: 4px 0 15px rgba(173, 181, 189, 0.1); /* 微阴影 */
}

/* 主内容区 */
.el-main {
  background: rgba(248, 249, 250, 0.97); /* 与主容器呼应 */
  padding: 20px;
}

.bigbox{
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 30px rgba(108, 117, 125, 0.08);
  border: 1px solid rgba(222, 226, 230, 0.5); /* 浅灰装饰线 */
  border-radius: 12px;
  min-height: calc(100vh - 40px);
  padding: 20px;
}

.box{
  background: linear-gradient(145deg, #E9ECEF 0%, #DEE2E6 100%); /* 中性灰渐变 */
  box-shadow: 0 4px 6px rgba(108, 117, 125, 0.05);
  padding: 10px;
  margin-bottom: 20px;
}

.box img {
  border-radius: 8px;
}

/* 菜单交互 */
.el-menu-item {
  margin: 4px 0;
  border-radius: 8px;
}

.el-menu-item:hover {
  background: rgba(233, 236, 239, 0.3) !important; /* 浅灰透明层 */
}

.el-menu-item.is-active {
  background: linear-gradient(90deg, #CED4DA 0%, #ADB5BD 100%) !important; /* 中灰激活态 */
  box-shadow: 0 4px 6px rgba(108, 117, 125, 0.1);
}

/* 文字系统 */
.el-menu-item span {
  color: #495057; /* 深灰艺术字 */
  font-family: 'Helvetica Neue', sans-serif; /* 现代无衬线 */
  letter-spacing: 0.5px;
  font-size: 0.95em;
}

/* 装饰元素 */
.el-menu-item::after {
  content: '🖌️'; /* 画笔符号 */
  color: #ADB5BD; /* 中灰色 */
}

.el-menu-vertical::before {
  background: linear-gradient(45deg, 
    rgba(206, 212, 218, 0.05) 0%, 
    rgba(173, 181, 189, 0.05) 50%, 
    rgba(108, 117, 125, 0.08) 100%); /* 灰调层次 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-aside {
    width: 64px !important;
  }
  
  .el-menu-item span {
    display: none;
  }
}

/* 添加顶部栏样式 */
.el-header {
  background: white;
  border-bottom: 1px solid #eee;
  padding: 0 20px;
}

.header-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  font-size: 1.2em;
  color: #2c3e50;
  font-weight: bold;
}

/* 确保主容器正确显示 */
.el-container {
  height: 100vh;
}
</style>